<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> SimpleModal Tests </title>

<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2009 - Eric Martin' />
<meta name='description' content='SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.' />
<meta name='keywords' content='simplemodal jquery plugin modal dialog css javascript dom' />

<link href="css/simplemodal.css" type="text/css" rel="stylesheet" media="screen"></link>
<!--[if IE]>
<style type='text/css'>
	ul{margin: 0;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type='text/css'>
	@import "css/simplemodal-ie.css";
</style>
<![endif]-->

<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery.simplemodal.js' type='text/javascript'></script>
<script src='js/simplemodal.js' type='text/javascript'></script>

</head>
<body>
<div id='container'>
	<div id='header'><h1>SimpleModal Tests</h1></div>
	<div id='content'>
	<ul>
		<li><a href='#' id='test1'>Chained Function - default options</a> <pre><code>$('#modalContentTest').modal();</code></pre></li>
		<li><a href='#' id='test2'>Modal Function w/ jQuery DOM attached element - default options</a> <pre><code>$.modal($('#modalContentTest'));</code></pre></li>
		<li><a href='#' id='test3'>Chained Function w/ jQuery DOM unattached element - default options</a> <pre><code>$('&lt;div&gt;&lt;h1&gt;New DOM Element&lt;/h1&gt;&lt;/div&gt;').modal();</code></pre></li>
		<li><a href='#' id='test4'>Modal Function w/ DOM element - default options</a> <pre><code>$.modal(document.getElementById('modalContentTest'));</code></pre></li>
		<li><a href='#' id='test5'>Modal Function w/ HTML - default options</a> <pre><code>$.modal("&lt;div class='test'&gt;\
		&lt;h1&gt;Sample Content&lt;/h1&gt;\
		&lt;p&gt;This can be complex HTML containing &lt;a href='#'&gt;links&lt;/a&gt;,\
		&lt;input type='text' value='input boxes' size='8'/&gt;, etc...&lt;/p&gt;\
	 &lt;/div&gt;");</code></pre></li>
		<li><a href='#' id='test6'>Modal Function w/ string - default options</a> <pre><code>$.modal("Sample Content - just a plain 'ol string");</code></pre></li>
		<li><a href='#' id='test19'>Data overflow test</a> <pre><code>$('#modalContentOverflowTest').modal({maxHeight:400, maxWidth:600});</code></pre></li>
		<li><a href='#' id='test20'>Overlay Close</a> <pre><code>$('#modalContent').modal({overlayClose:true});</code></pre></li>
		<li><a href='#' id='test22'>Min height</a> <pre><code>$('&gt;h1&lt;Test&gt;/h1&lt;').modal({minHeight:400});</code></pre></li>
		<li><a href='#' id='test23'>Min width</a> <pre><code>$('&gt;h1&lt;Test&gt;/h1&lt;').modal({minWidth:600});</code></pre></li>
		<li><a href='#' id='test24'>Max height</a> <pre><code>$('#modalContentOverflowTest').modal({maxHeight:500});</code></pre></li>
		<li><a href='#' id='test25'>Max width</a> <pre><code>$('#modalContentOverflowTest').modal({maxWidth:700});</code></pre></li>
		<li><a href='#' id='test26'>Max height/width</a> <pre><code>$('#modalContentOverflowTest').modal({maxHeight:500, maxWidth:700});</code></pre></li>
		<li><a href='#' id='test27'>Disable focus</a> <pre><code>$('#modalContentTest').modal({focus:false});</code></pre></li>
		<li><a href='#' id='test28'>Non-modal</a> <pre><code>$('#modalContentTest').modal({modal:false});</code></pre></li>
		<li><a href='#' id='test29'>Update</a> <pre><code>$('#modalContentTest').modal({blahblah});</code></pre></li>
		<li><a href='#' id='test30'>Update 2</a> <pre><code>$('#modalContentTest').modal({blahblah});</code></pre></li>
		<li><a href='#' id='test31'>Update 3</a> <pre><code>$('#modalContentTest').modal({blahblah});</code></pre></li>
		<li><a href='#' id='test32'>Update 4</a> <pre><code>$('#modalContentTest').modal({blahblah});</code></pre></li>
		<li><a href='#' id='test33'>AutoResize: true</a> <pre><code>$('#modalContentOverflowTest').modal({autoResize:treu, containerCss:{height:'1000px', width:'1000px'}});</code></pre></li>
		<li><a href='#' id='test7'>Modal Function w/ string/HTML - close: false</a> <pre><code>$.modal("&lt;div class='test'&gt;\
		&lt;h1&gt;Sample Content&lt;/h1&gt;\
		&lt;p&gt;This example uses a custom close.&lt;/p&gt;\
		&lt;p&gt;&lt;a href='#' class='simplemodal-close'&gt;Close&lt;/a&gt;&lt;/p&gt;\
	 &lt;/div&gt;", {close: false});</code></pre></li>
		<li><a href='#' id='test8'>Chained Function w/ DOM element - persist: true</a> <pre><code>$('#modalContentPersistTest').modal({persist: true});</code></pre></li>
		<li><a href='#' id='test9'>onOpen callback function - onOpen: function</a> <pre><code>$('#modalContentTest').modal({onOpen: modalOpen});</code></pre>
	<pre><code>/**
 * When the open event is called, this function will be used to 'open'
 * the overlay, container and data portions of the modal dialog.
 *
 * onOpen callbacks need to handle 'opening' the overlay, container
 * and data.
 */
function modalOpen (dialog) {
	dialog.overlay.fadeIn('slow', function () {
		dialog.container.fadeIn('slow', function () {
			dialog.data.hide().slideDown('slow');	 
		});
	});
}</code></pre></li>
		<li><a href='#' id='test10'>onClose callback function - onClose: function</a> <pre><code>$('#modalContentTest').modal({onClose: simplemodal-close});</code></pre>
	<pre><code>/**
 * When the close event is called, this function will be used to 'close'
 * the overlay, container and data portions of the modal dialog.
 *
 * The SimpleModal close function will still perform some actions that
 * don't need to be handled here.
 *
 * onClose callbacks need to handle 'closing' the overlay, container
 * and data.
 */
function simplemodal-close (dialog) {
	dialog.data.fadeOut('slow', function () {
		dialog.container.hide('slow', function () {
			dialog.overlay.slideUp('slow', function () {
				$.modal.close();
			});
		});
	});
}</code></pre></li>
		<li><a href='#' id='test11'>onShow callback function - onShow: function</a> <pre><code>$('#modalContentTest').modal({onShow: modalShow});</code></pre>
	<pre><code>/**
 * After the dialog is show, this callback will bind some effects
 * to the data when the 'button' button is clicked.
 *
 * This callback is completely user based; SimpleModal does not have
 * a matching function.
 */
function modalShow (dialog) {
	$('input.animate').one('click', function () {
		dialog.data.slideUp('slow', function () {
			dialog.data.slideDown('slow');
		});
	});
}</code></pre></li>
	<li><a href='#' id='test12'>IE SELECT bleed test</a>
		<p>Make sure the select options do not bleed through the modal dialog.</p>
		<div style='text-align: center;'>
		<form action='#'>
		<select>
			<option>option1</option>
			<option>option2</option>
			<option>option3</option>
			<option>option4</option>
			<option>option5</option>
		</select>
		</form>
		</div>
	</li>
	<li><a href='#' id='test13'>Position test (both) - position: [20,20]</a> <pre><code>$('#modalContentTest').modal({position: [20,20]});</code></pre></li>
	<li><a href='#' id='test14'>Position test (top only) - position: [20,]</a> <pre><code>$('#modalContentTest').modal({position: [20,]});</code></pre></li>
	<li><a href='#' id='test15'>Position test (left only) - position: [,20]</a> <pre><code>$('#modalContentTest').modal({position: [,20]});</code></pre></li>
	<li><a href='#' id='test16'>Position test (px) - position: ["40px","40px"]</a> <pre><code>$('#modalContentTest').modal({position: ["40px","40px"]});</code></pre></li>
	<li><a href='#' id='test17'>Position test (%) - position: ["25%","25%"]</a> <pre><code>$('#modalContentTest').modal({position: ["25%","25%"]});</code></pre></li>
	<li><a href='#' id='test18'>Horizontal test</a> <pre><code>$('#modalContentTest').modal();</code></pre>
	<div style='width:200%; margin-bottom:10px;'>Wide Content - for horizontal scroll testing</div>
	</li>
	<li>Doctypes:
	  <ul>
	    <li><a href='quirksmode.html'>quirksmode</a></li>
		<li><a href='html-4.01-frameset.html'>html-4.01-frameset</a></li>
		<li><a href='html-4.01-strict.html'>html-4.01-strict.html</a></li>
		<li><a href='html-4.01-transitional.html'>html-4.01-transitional</a></li>
		<li><a href='html-5.html'>html-5</a></li>
		<li><a href='xhtml-1.0-frameset.html'>xhtml-1.0-frameset</a></li>
		<li><a href='xhtml-1.0-strict.html'>xhtml-1.0-strict</a></li>
		<li><a href='xhtml-1.0-transitional.html'>xhtml-1.0-transitional</a></li>
		<li><a href='xhtml-1.1.html'>xhtml-1.1</a></li>
	  </ul>
	</li>
	</ul>
	</div>
	<div style='height: 200px;'>&nbsp;</div>
</div>
<div id='modalContentTest' style='display: none'>
	<form action='#'>
	<textarea rows='5' cols='30'></textarea><br/>
	<select>
		<option>option1</option>
		<option>option2</option>
		<option>option3</option>
		<option>option4</option>
		<option>option5</option>
	</select><br/>
	<input type='text'/><br/>
	<input type='button' value='button' class='animate'/><br/>
	<input type='button' value='close' class='simplemodal-close'/><br/>
	</form>
</div>
<div id='modalContentPersistTest' style='display: none'>
	<p>Enter values in the textarea and text field, then close the dialog. When you re-run the test, the data will still be there.</p>
	<form action='#'>
	<textarea rows='5' cols='30'></textarea><br/>
	<br/>
	<input type='text'/><br/>
	Radio Buttons: <input type='radio' name='group' value='1' /> <input type='radio' name='group' value='2' /> <input type='radio' name='group' value='3' /><br/>
	Check Boxes: <input type='checkbox' name='option1' value='1' /> <input type='checkbox' name='option2' value='2' /> <input type='checkbox' name='options3' value='3' /><br/>
	<br/>
	<input type='button' value='close' class='simplemodal-close'/><br/>
	</form>
</div>
<div id='modalContentOverflowTest' style='display: none'>
   <h1>Data overflow test</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
   nisi ut aliquip ex ea commodo consequat.</p>
   <p>Duis aute irure dolor in reprehenderit in voluptate velit 
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
   occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
   mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
   nisi ut aliquip ex ea commodo consequat.</p>
   <p>Duis aute irure dolor in reprehenderit in voluptate velit 
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
   occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
   mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
   nisi ut aliquip ex ea commodo consequat.</p>
   <p>Duis aute irure dolor in reprehenderit in voluptate velit 
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
   occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
   mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
   nisi ut aliquip ex ea commodo consequat.</p>
   <p>Duis aute irure dolor in reprehenderit in voluptate velit 
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
   occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
   mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
   nisi ut aliquip ex ea commodo consequat.</p>
   <p>Duis aute irure dolor in reprehenderit in voluptate velit 
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
   occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
   mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
   nisi ut aliquip ex ea commodo consequat.</p>
   <p>Duis aute irure dolor in reprehenderit in voluptate velit 
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
   occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
   mollit anim id est laborum.</p>
	<input type='button' value='button' class='animate'/><br/>
</div>
<div style='height: 50px;'>&nbsp;</div>
</body>
</html>
